<template>
	<view class="content">
		<!--顶部-->
		<view class="integral-top">
			<image class="integral-top-image" mode="widthFix"
				:src="icon"></image>
			<view class="rule" @click="handleRuleClick">积分规则</view>
			<view class="address" @click="handleAddressClick">我的地址管理</view>
			<view class="integral">
				<view>{{userIntegral}}</view>
				<view>积分数量</view>
			</view>
		</view>
		<!--中部banner-->
		<view class="integral-banner">
			<image class="integral-banner-image" mode="widthFix" @click="handleBannerClick" 
				src="https://api.cd1a.cn/imges/banner.png"></image>
		</view>
		<!--底部tab-->
		<view class="tabs-wrap">
			<view class="line"></view>
			<u-tabs :list="titleList" active-color="#0DA297" :is-scroll="false" :current="current" @change="handleTabChange"></u-tabs>
		</view>
		<view class="list">
			<mall-list @click="handleMallClick" :list="list" v-if="current===0"></mall-list>
			<detail-list v-if="current===1" :list="detailList"></detail-list>
		</view>
		<view class="bottom-safe-area"></view>
	</view>
</template>
<script>
	import mallList from './components/mall-list.vue';
	import detailList from './components/detail-list.vue';
	export default {
		components:{
			mallList,
			detailList
		},
		data() {
			return {
				icon:this.$imgUrl+'integral/integral.png',
				//顶部
				userIntegral:0,
				//底部tab
				current: 0,
				titleList: [{
					name: '积分商城'
				}, {
					name: '积分明细'
				}],
				list:[],
				detailList:[],
				listShow:true,
				page:1,
				row:10,
			}
		},
		onShow() {
			this.getListRequest();
		},
		methods: {
			//顶部
			handleRuleClick(){
				uni.navigateTo({
					url: '/pages/integral/rule'
				});
			},
			handleAddressClick(){
				uni.navigateTo({
					url: '/pages/integral/address-list'
				});
			},
			//中部banner
			handleBannerClick(){
				uni.navigateTo({
					url: '/pages/integral/banner'
				});
			},
			//底部tab
			_reset(){
				this.page=1;
				this.list=[];
				this.detailList=[];
			},
			handleTabChange(index) {
				this.current = index;
				this._reset();//reset
				this.getListRequest();
				
			},
			getListRequest(){
				if(this.current==0){
					//积分商品列表
					this.$u.api.getIntegralList({
						
						page:this.page,
					}).then(res=>{
						this.list=res.list;
						this.userIntegral=res.integral;//顶部用户积分数据
					}).catch(()=>{});
				}else if(this.current==1){
					//积分明细列表
					this.$u.api.getDetailList({
						
						page:this.page,
					}).then(res=>{
						this.detailList=res.list;
					}).catch(()=>{});
				};
			},
			handleMallClick(i){
				
				uni.navigateTo({
					url: '/pages/integral/detail?id='+this.list[i].goods_id
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 640rpx;
	}
	.integral-top-image{
		width:100%;
		display: block;
	}
	.integral-top{
		width:100%;
		position:fixed;
		left:0;
		top:0;
		z-index: 20;
	}
	.integral-banner-image{
		width:100%;
		display: block;
	}
	.integral-banner{
		position:fixed;
		left:0;
		top:320rpx;
		width:100%;
		z-index: 10;
		padding:20rpx 24rpx;
		background-color:#fff;
	}
	.tabs-wrap{
		position:fixed;
		left:0;
		top:520rpx;
		width:100%; 
		padding:20rpx 0;
		z-index: 30;
		background-color:#f4f4f4;
	}
	.line{
		position: absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		height:60rpx;
		width:2rpx;
		background-color:#efefef;
	}
	.list{
		padding:20rpx 0;
		padding-top: 0;
	}
	.rule{
		position: absolute;
		left:24rpx;
		top:30rpx;
		height:40rpx;
		padding:0 10rpx;
		line-height: 36rpx;
		border:2rpx solid #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
		color:#fff;
	}
	.address{
		position: absolute;
		right:24rpx;
		top:30rpx;
		height:40rpx;
		padding:0 10rpx;
		line-height: 36rpx;
		border:2rpx solid #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
		color:#fff;
	}
	.integral{
		position: absolute;
		left:50%;
		top:100rpx;
		transform:translateX(-50%);
		color: #FFFFFF;
		text-align: center;
	}
	.integral view:nth-child(1){
		font-size: 80rpx;
		font-weight: 600;
		padding-bottom: 20rpx;
	}
	.integral view:nth-child(2){
		font-size: 28rpx;
		
	}
</style>
<style>
	page{
		background-color:#f4f4f4;
	}
</style>
